<template>
  <div class="category-head">
    <img
      src="https://s3plus.meituan.net/v1/mss_65766da973d14523b3d781fe3ac2bbac/www-assets/shared/images/logo/h-transparent-v584ea975.svg"
      class="category-logo"
    />
    <div class="category-head-right">
      <span>登录</span>
      <span>消息</span>
      <span>成为房东</span>
    </div>
  </div>
  <div class="hotel-detail">
    <div class="img-left">
      <el-image
        style="width: 100%; height: 414px"
        :src="url"
        :preview-src-list="srcList"
        :initial-index="4"
        fit="cover"
      />
    </div>
    <div class="img-right">
      <el-image
        style="width: 50%; height: 50%"
        :src="url"
        :preview-src-list="srcList"
        :initial-index="4"
        fit="fill"
      />
      <el-image
        style="width: 50%; height: 50%"
        src="https://p0.meituan.net/iphoenix/8e459814742c1d25cc883707fd2bdc10192859.jpg@1920w_1080h"
        :preview-src-list="srcList"
        :initial-index="4"
        fit="fill"
      />
      <el-image
        style="width: 50%; height: 50%"
        src="https://p0.meituan.net/iphoenix/2dc9e9ed8fa25ddfd5ba74fc666a1adf174883.jpg@1920w_1080h"
        :preview-src-list="srcList"
        :initial-index="4"
        fit="fill"
      />
      <el-image
        style="width: 50%; height: 50%"
        src="https://p0.meituan.net/iphoenix/a906adf1d86ec945f11db32577c1c8b0172509.jpg@1920w_1080h"
        :preview-src-list="srcList"
        :initial-index="4"
        fit="fill"
      />
    </div>
  </div>
  <HotelDetailMain />
  <div class="hot-city">
    <dl class="hot-city-name">
      <dt>热门城市</dt>
      <dd
        v-for="cityHotel in cityHotelList"
        :key="cityHotel"
        class="hot-city-item"
      >
        <a href="javascript:;">{{ cityHotel }}</a>
      </dd>
    </dl>
    <dl class="hot-city-name">
      <dt>热门城市</dt>
      <dd
        v-for="cityHotel in hotHouseList"
        :key="cityHotel"
        class="hot-city-item"
      >
        <a href="javascript:;">{{ cityHotel }}</a>
      </dd>
    </dl>
  </div>
  <footer class="hotel-footer">
    <div class="footer-item">
      <h5>公司信息</h5>
      <ul class="footer-text">
        <li>
          <a href="javascript:;">关于我们</a>
        </li>
        <li>
          <a href="javascript:;">工作机会</a>
        </li>
      </ul>
    </div>
    <div class="footer-item">
      <h5>网站帮助</h5>
      <ul class="footer-text">
        <li>
          <a href="javascript:;">规则中心</a>
        </li>
        <li>
          <a href="javascript:;">网站地图</a>
        </li>
        <li>
          <a href="javascript:;">民宿推荐</a>
        </li>
      </ul>
    </div>
    <div class="footer-item">
      <h5>人工客服</h5>
      <ul class="footer-text">
        <li>
          <a href="javascript:;">客服电话</a>
          <span class="footer-num">400-0660-190</span>
        </li>
        <li>
          <a href="javascript:;">登录问题</a>
          <span class="footer-num">10107888</span>
        </li>
      </ul>
    </div>
    <div class="footer-item erweima">
      <img
        src="https://s3plus.meituan.net/v1/mss_65766da973d14523b3d781fe3ac2bbac/www-assets/shared/images/qrcodes/app-download-v56bda98f.svg"
        class="weixin"
      />
      <img
        src="https://s3plus.meituan.net/v1/mss_65766da973d14523b3d781fe3ac2bbac/common-assets/2018/pureicon/favicon-32.png"
        class="meituan-logo"
      />
      <div>下载美团民宿APP</div>
    </div>
  </footer>
  <div class="footer-record">
    <img
      src="https://p0.meituan.net/travelcube/d0289dc0a46fc5b15b3363ffa78cf6c719256.png"
    />
    <div>沪公网安备31010502000052号 沪B2-20040012 营业资质</div>
  </div>
</template>
<script lang="ts">
export default {
  name: "HotelDetail",
};
</script>

<script lang="ts" setup>
import HotelDetailMain from "../components/hotel-detail-main/index.vue";
const url =
  "https://p0.meituan.net/iphoenix/026faec6ff60bcfdb89fced3489aabde693385.png@1920w_1080h";
const srcList = [
  "https://p0.meituan.net/iphoenix/026faec6ff60bcfdb89fced3489aabde693385.png@1920w_1080h",
  "https://p0.meituan.net/iphoenix/8e459814742c1d25cc883707fd2bdc10192859.jpg@1920w_1080h",
  "https://p0.meituan.net/iphoenix/a906adf1d86ec945f11db32577c1c8b0172509.jpg@1920w_1080h",
  "https://p0.meituan.net/iphoenix/8e459814742c1d25cc883707fd2bdc10192859.jpg@1920w_1080h",
  "https://p0.meituan.net/iphoenix/2dc9e9ed8fa25ddfd5ba74fc666a1adf174883.jpg@1920w_1080h",
  "https://p0.meituan.net/iphoenix/6fe853143c648977defdf1930922d3af318922.jpg@1920w_1080h",
];
const cityHotelList = [
  "北京的民宿",
  "上海的民宿",
  "南京的民宿",
  "杭州的民宿",
  "厦门的民宿",
  "武汉的民宿",
  "长沙的民宿",
  "广州的民宿",
  "深圳的民宿",
  "三亚的民宿",
];

const hotHouseList = [
  "有厨具的民宿",
  "有洗衣机的民宿",
  "有今夜特价的民宿",
  "有限时折扣的民宿",
  "适合情侣的民宿",
  "视野开阔的民宿",
  "别墅",
  "复式loft",
  "度假民宿",
];
</script>
<style scoped>
* {
  margin: 0 auto;
}
.category-head {
  width: 1200px;
  height: 70px;
  display: flex;
  align-items: center;
}
.category-logo {
  width: 142px;
  height: 70px;
  margin-left: 0;
}
.category-head-right {
  width: 216px;
  text-align: right;
  margin: 0;
  font-size: 14px;
  color: #585a5a;
}
.category-head-right span {
  padding: 10px;
}
.search-hotel-wrap {
  position: absolute;
  left: 0;
  top: 230px;
  width: 100%;
  height: 57px;
  display: flex;
  justify-content: center;
}

.hotel-detail {
  margin-top: 10px;
  display: flex;
  width: 100%;
  height: 414px;
}
.img-left {
  width: 50%;
}
.img-right {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}
.img-right :deep(.el-image__preview) {
  padding: 8px;
}
/* 底部 开始 */

.hot-city {
  width: 1200px;
  padding: 40px 0 40px 15px;
  box-sizing: border-box;
}
.hot-city-name {
  padding-bottom: 20px;
}
.hot-city-name dt {
  display: inline-block;
  width: 96px;
  font-size: 14px;
  color: #333;
  font-weight: 700;
}
.hot-city-item {
  display: inline;
  font-size: 14px;
  color: #666;
  padding-right: 35px;
}
.hotel-footer {
  width: 1200px;
  padding: 0 30px 40px 15px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.footer-item {
  text-align: left;
  margin: 0;
  padding-right: 20px;
}
.footer-item h5 {
  font-weight: 700px;
  font-size: 18px;
  color: #333;
  padding: 10px 0 15px 0;
}
.footer-text {
  font-size: 14px;
  color: #7d7e80;
}
.footer-text li {
  margin: 10px 0;
}
.footer-num {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-left: 5px;
}
.weixin {
  width: 130px;
  height: 130px;
}
.erweima {
  position: relative;
}
.erweima div {
  font-size: 12px;
  color: #333;
}
.meituan-logo {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 35%;
  left: 34%;
}
.footer-record {
  width: 1200px;
  height: 54px;
  padding: 20px 15px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.footer-record div {
  font-size: 14px;
  color: #7d7e80;
  margin: 0;
}
.footer-record img {
  margin: 0;
  width: 14px;
  height: 14px;
  padding-right: 5px;
}
</style>
